<template>
  <div>
    <app-header></app-header>
    <div class="main">
      <div v-for="(list,i) in list" :key="i" v-if="i==index">
        <ul class="nav">
          <li>
            <span class="titleNum">{{list.index}}</span>
            <span class="quesType" v-if="list.type=='单选'">(单选题)</span>
            <span class="quesType" v-if="list.type=='多选'">(多选题)</span>
            <span class="quesType" v-if="list.type=='判断'">(判断题)</span>
            <span class="content">{{list.content}}</span>
          </li>
          <li v-for="(item, ind) in list.options" :key="ind" @click="chooseAnswer(list,item)">
            <span class="option" :class="list.yourAnswer.indexOf(item.value)>-1?'active':''">{{item.value}}</span>
            <span class="optionContent">{{item.label}}</span>
          </li>
        </ul>
        <span class="btn" @click="show=true;">参考答案</span>
        <span class="btn" v-if="preBtn" @click="pre">上一题</span>
        <span class="btn" v-if="nextBtn" @click="next">下一题</span>
        <ul class="nav1" v-if="show">
          <li>
            <span class="analysis">参考答案：</span>
            <span>{{list.answer}}</span>
          </li>
          <li>
            <span class="analysis">试题解析：</span>
            <span>{{list.analyse?list.analyse:'暂无解析'}}</span>
          </li>
        </ul>
      </div>
      <!-- <radio :options="radio001" value="China"></radio> -->
      
    </div>
  </div>
</template>

<script>
  import Header from "../../components/header";
  import { getCourseQuestionList } from '@/api/trainClass';
  import {
    TransferDom,
    Popup,
    Group,
    Cell,
    XButton,
    XSwitch,
    Toast,
    XAddress,
    ChinaAddressData
  } from "vux";
  export default {
    directives: {
      TransferDom
    },
    components: {
      "app-header": Header,
      Popup,
      Group,
      Cell,
      XSwitch,
      Toast,
      XAddress,
      XButton
    },
    data() {
      return {
        index: 0,
        show: false,
        courseId: '',
        list: [],
        preBtn:false,
        nextBtn:true
      };
    },
    created() {
      let that = this;
      this.courseId = this.$route.query.id;
      this.$vux.loading.show({
        text: "Loading"
      });
      getCourseQuestionList({ courseId: that.courseId }).then(
        response => {
          that.list = response;
          this.$vux.loading.hide();
        }
      );
    },
    methods: {
      chooseAnswer(list, item) {
        if (list.type == '单选' || list.type == '判断') {
          list.yourAnswer = item.value;
        } else {
          if (list.yourAnswer.indexOf(item.value) == -1) {
            list.yourAnswer.push(item.value);
          } else {
            let index = list.yourAnswer.indexOf(item.value);
            list.yourAnswer.splice(index, 1);
          }
        }
      },
      pre(){
        this.index=this.index-1;
        this.show=false;
        this.preBtn=this.index>0;
        this.nextBtn=this.index<this.list.length-1;
      },
      next(){
        this.index=this.index+1;
        this.show=false;
        this.preBtn=this.index>0;
        this.nextBtn=this.index<this.list.length-1;
      }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
  .main {
    padding: 17px 15px 0 15px;
    text-align: left;
    padding-top:90px;
  }

  ul {
    list-style-type: none;
  }

  .nav li {
    margin-bottom: 25px;
  }

  .nav1 {
    margin-top: 88px;
    margin-bottom: 160px;
  }

    .nav1 li {
      margin-bottom: 12px;
      font-size: 14px;
      font-weight: bold;
    }

  .titleNum {
    display: inline-block;
    width: 21px;
    height: 21px;
    text-align: center;
    border-radius: 5px;
    background-color: #2269ff;
    color: #ffffff;
    line-height: 21px;
    font-size: 11px;
    font-weight: bold;
  }

  .quesType {
    display: inline-block;
    color: #2269ff;
    padding-left: 5px;
    font-size: 15px;
    vertical-align: middle;
    font-weight: bold;
  }

  .content {
    font-size: 15px;
    vertical-align: middle;
    margin-left: 10px;
    font-weight: bold;
  }

  .option {
    display: inline-block;
    width: 17px;
    height: 17px;
    border-radius: 15px;
    border: solid 1px #979797;
    text-align: center;
    line-height: 17px;
    margin-right: 5px;
    font-weight: bold;
  }

  .optionContent {
    font-size: 14px;
    font-weight: bold;
  }

  .active {
    background-color: #0abd2b;
    color: #ffffff;
    border: none;
  }

  .btn {
    display: inline-block;
    height: 45px;
    font-size: 15px;
    background-color: #2269ff;
    font-weight: bold;
    line-height: 45px;
    width: 20%;
    color: #ffffff;
    text-align: center;
    border-radius: 10px;
    margin-top: 25px;
    margin: 15px;
  }

  .analysis {
    color: #2269ff;
  }

  .bottom {
    background-color: #eeeeee;
    height: 50px;
  }

  .nav2 {
    clear: both;
  }

    .nav2 li {
      float: right;
      margin-right: 30px;
      height: 50px;
      line-height: 50px;
      font-size: 14px;
    }

  .true_icon {
    display: inline-block;
    background: url("../../assets/images/true@2x.png") no-repeat center center;
    background-size: 100%;
    width: 20px;
    height: 20px;
    margin-right: 3px;
    vertical-align: middle;
  }

  .bule_icon {
    display: inline-block;
    background: url("../../assets/images/bule@2x.png") no-repeat center center;
    background-size: 100%;
    width: 20px;
    height: 20px;
    margin-right: 3px;
    vertical-align: middle;
  }

  .false_icon {
    display: inline-block;
    background: url("../../assets/images/false@2x.png") no-repeat center center;
    background-size: 100%;
    width: 20px;
    height: 20px;
    margin-right: 3px;
    vertical-align: middle;
  }

  .popup2 {
    padding-bottom: 15px;
    height: 325px;
    background-color: #ffffff;
  }

  .nav3 {
    display: inline;
    text-align: center;
  }

    .nav3 li {
      display: inline-block;
      width: 20%;
      margin-top: 14px;
    }

  .subjectNum {
    display: inline-block;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 50px;
    background-color: #eeeeee;
    font-size: 15px;
  }

  .geenColor {
    border: solid 1px #0ebe2e;
  }

  .redColor {
    border: solid 1px #fa4444;
  }
</style>
